<template>
    <div>
      <baidu-map class="bm-view" ak="uybBFn48otpjsOTBCpxIwUHCBWO3MUnb" :center="center" :zoom="zoom" :scroll-wheel-zoom="true"  @ready="handler">
        <bm-marker :position="center" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label content="好融艺" :labelStyle="{color: 'red', fontSize : '16px'}" :offset="{width: -15, height: 30}"/>
        </bm-marker>
      </baidu-map>
    </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import bmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
import bmLabel from 'vue-baidu-map/components/overlays/Label.vue'
export default {
  name: 'index',
  components: {
    BaiduMap,
    bmMarker,
    bmLabel
  },
  data () {
    return {
      center: { lng: 104.070091, lat: 30.584569 },
      zoom: 15
    }
  },
  methods: {
    handler ({ BMap, map }) {
      console.log(BMap, map)
    }
  }
}
</script>

<style scoped>
.bm-view{
  width: 100%;
  height: 500px;
  margin-bottom: 127px;
}
</style>
